<template>
  <div class="about-page">
    <div class="about-container">
      <div class="about-content">
        <section class="about-section">
          <h2 class="section-title">平台简介</h2>
          <div class="section-content">
            <p>我们是国内最早最热门的AI导航网站之一，专注为大家提供国内外最新、最热门的AI工具、资源和资讯，每日持续更新。</p>
            <p>作为AI工具领域的专业导航平台，我们致力于帮助用户快速找到所需的AI工具，提升工作效率，拥抱人工智能时代的变革。</p>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">合作优势</h2>
          <div class="section-content">
            <p>如果您是 AI 产品服务的开发者，与我们合作可以让您的产品或服务直接接触到这个广泛的用户群体，您可以获得最直接的品牌曝光、网站流量和商业收入。</p>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">服务内容</h2>
          <div class="services-grid">
            <div class="service-card">
              <div class="service-icon">🚀</div>
              <h3>付费收录</h3>
              <ul class="service-features">
                <li>24 小时快速收录：提交后24小时内上线，免去排队等待</li>
                <li>独立产品页：生成专属页面，全面展示产品信息（介绍、功能、场景、官网等）</li>
                <li>永久更新支持：产品功能更新或官网调整时，可随时联系我们修改</li>
                <li>全站长期展示：首页 / 分类页 / 搜索结果中长期展示，持续获取流量曝光</li>
                <li>提升产品网站权重：快速收录到 Google、Bing 等搜索引擎，提升权重</li>
              </ul>
              <div class="service-action">
                <!-- <a href="#" class="submit-btn">点此提交产品</a> -->
              </div>
            </div>

            <div class="service-card">
              <div class="service-icon">📢</div>
              <h3>广告投放</h3>
              <div class="service-description">
                <p>我们支持多种合作方式，包括包月广告CPT，效果广告（CPC、CPA、CPS）等。</p>
                <p>根据您的需求定制最适合的广告投放方案，实现精准营销。</p>
              </div>
            </div>
          </div>
        </section>

        <section class="about-section">
          <h2 class="section-title">联系方式</h2>
          <div class="contact-info">
            <p class="contact-desc">如有合作意向，请联系我们：</p>
            <div class="contact-items">
              <div class="contact-item">
                <span class="contact-label">微信：</span>
                <span class="contact-value">yuyan08520</span>
                <span class="contact-note">（请备注：公司+产品）</span>
              </div>
              <div class="contact-item">
                <span class="contact-label">邮箱：</span>
                <span class="contact-value">yak940@126.com</span>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/**
 * 关于我们页面组件
 * 展示平台介绍、服务内容、合作方式和联系方式
 */

/**
 * 页面标题
 * 用于浏览器标签页和SEO优化
 */
const title = '关于我们 - AI工具大全 | 专业的AI工具导航平台';

/**
 * 页面描述
 * 用于SEO优化和社交媒体分享
 */
const description = '了解AI工具大全平台，我们专注为大家提供国内外最新、最热门的AI工具、资源和资讯，每日持续更新。提供产品收录、广告投放等服务。';

const _pageTitle = '关于我们'
const _pageDescription = '专注为大家提供国内外最新、最热门的AI工具、资源和资讯'

/**
 * 共享页面标题到全局状态
 * 这样其他组件（如Breadcrumb）可以访问这个标题
 */
const pageTitle = useState('pageTitle', () => _pageTitle)
const pageDescription = useState('pageDescription', () => _pageDescription)

// 更新全局状态
pageTitle.value = _pageTitle

pageDescription.value = _pageDescription

/**
 * 设置页面头部信息
 * 包括标题、描述、关键词等SEO相关信息
 */
useHead({
  title,
  meta: [
    // 页面描述
    { name: 'description', content: description },
    // SEO关键词
    { name: 'keywords', content: '关于我们,AI工具大全,AI工具导航,AI工具收录,AI广告投放,AI工具平台' },
    // Open Graph协议标签，用于社交媒体分享
    { property: 'og:title', content: title },
    { property: 'og:description', content: description },
    { property: 'og:type', content: 'website' },
    // 搜索引擎爬虫指令
    { name: 'robots', content: 'index, follow' },
  ]
})
</script>

<style lang="less" scoped>
.about-page {
  min-height: calc(100vh - 130px);
  background: var(--bg-color);
  color: var(--text-color);
  padding: 40px 20px;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
}

.about-header {
  text-align: center;
  margin-bottom: 60px;
  padding: 40px 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 20px;
  color: white;

  .about-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
  }

  .about-subtitle {
    font-size: 20px;
    opacity: 0.9;
    font-weight: 300;
  }
}

.about-content {
  .about-section {
    margin-bottom: 60px;
    background: var(--bg-secondary);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

    .section-title {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 30px;
      color: var(--text-color);
      position: relative;
      padding-bottom: 15px;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 2px;
      }
    }

    .section-content {
      font-size: 18px;
      line-height: 1.8;
      color: var(--text-secondary);

      p {
        margin-bottom: 20px;
      }
    }
  }
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 40px;
  margin-top: 30px;

  .service-card {
    background: white;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    }

    .service-icon {
      font-size: 48px;
      margin-bottom: 20px;
      text-align: center;
    }

    h3 {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 25px;
      text-align: center;
      color: var(--text-color);
    }

    .service-features {
      list-style: none;
      padding: 0;
      margin-bottom: 30px;

      li {
        padding: 12px 0;
        padding-left: 25px;
        position: relative;
        font-size: 16px;
        line-height: 1.6;
        color: var(--text-secondary);

        &::before {
          content: '✓';
          position: absolute;
          left: 0;
          color: #52c41a;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }

    .service-description {
      p {
        margin-bottom: 15px;
        font-size: 16px;
        line-height: 1.7;
        color: var(--text-secondary);
      }
    }

    .service-action {
      text-align: center;
      margin-top: 30px;

      .submit-btn {
        display: inline-block;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 12px 30px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        }
      }
    }
  }
}

.contact-info {
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  .contact-desc {
    font-size: 18px;
    margin-bottom: 30px;
    color: var(--text-secondary);
  }

  .contact-items {
    .contact-item {
      margin-bottom: 20px;
      font-size: 18px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .contact-label {
        font-weight: 600;
        color: var(--text-color);
        margin-right: 10px;
      }

      .contact-value {
        color: #667eea;
        font-weight: 500;
        margin-right: 15px;
      }

      .contact-note {
        color: var(--text-secondary);
        font-size: 14px;
        font-style: italic;
      }
    }
  }
}

/* 移动端响应式样式 */
@media (max-width: 768px) {
  .about-page {
    padding: 20px 15px;
  }

  .about-header {
    padding: 30px 20px;
    margin-bottom: 40px;

    .about-title {
      font-size: 36px;
    }

    .about-subtitle {
      font-size: 16px;
    }
  }

  .about-content {
    .about-section {
      padding: 30px 20px;
      margin-bottom: 40px;

      .section-title {
        font-size: 24px;
      }

      .section-content {
        font-size: 16px;
      }
    }
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 30px;

    .service-card {
      padding: 30px 20px;

      .service-icon {
        font-size: 36px;
      }

      h3 {
        font-size: 20px;
      }

      .service-features li {
        font-size: 14px;
      }
    }
  }

  .contact-info {
    padding: 30px 20px;

    .contact-desc {
      font-size: 16px;
    }

    .contact-items .contact-item {
      font-size: 16px;
      flex-direction: column;
      align-items: flex-start;

      .contact-label,
      .contact-value,
      .contact-note {
        margin-right: 0;
        margin-bottom: 5px;
      }
    }
  }
}

@media (max-width: 480px) {
  .about-header {
    .about-title {
      font-size: 28px;
    }
  }

  .services-grid .service-card {
    padding: 25px 15px;
  }
}

/* 暗黑模式适配 */
html.dark {
  .about-header {
    background: var(--btn-primary-bg);
  }

  .about-section,
  .service-card,
  .contact-info {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
  }

  .service-card {
    &:hover {
      box-shadow: 0 12px 40px var(--shadow-color);
    }
  }
}
</style>